<template>
  <div class="ai">
    <div id="login" @touchstart="createLoves" @touchend="removeSmallHert">
      <background ref="background"></background>
     </div>
     <div class='chooseBcg' v-if='bcgImgAreaShow'>
      <div class='top'>
        <div class='title'>更换背景</div>
        <div class='bcgs'>
          <div class="border" :class="{active:bcgImgIndex == index}" v-for='(item, index) in bcgImgList' :key='index'>
            <image :src='assetsUrl+item.src' @tap='chooseBcg' :data-index='index' :data-src='item.src'></image>
          </div>
        </div>
      </div>
      <div class='close' @tap='hideBcgImgArea'>
        <image :src="assetsUrl+'static/images/up-arrow.png'"></image>
      </div>
    </div>
    <image class='bcg' v-if='bcgImg' :src="assetsUrl+bcgImg" mode='aspectFill'></image>
    <!-- <div class="in_ai"></div> -->
    <!-- 内容区域 -->
    <div v-if='!bcgImgAreaShow'>
      <scroll-view  id="scroll-content" class="dialog-part" :style="{height: scrollHeight+'rpx'}" scroll-y :scrollTop="scrollTop" :scrollIntoView="'translate-'+toView" enable-back-to-top="true" scroll-with-animation="true">
        <div class="item_info" v-for="(item, index) in chatlist" :key="index">
          <div class='con'>
            <div class='mainList mainList_isay' v-if="item.isay!=undefined" :style="{marginBottom:item.robot!= undefined?'32rpx':'0'}">
              <div class='mainPhoto r-i'>
                <image :src='headRight'></image>
              </div>
              <div class='mainInfor r-t'>
                <!-- <text class="text" :style="{width:item.isay==''?'200rpx':'auto'}">{{item.isay}}</text> -->
                <div class="text" :style="{width:item.isay==''?'200rpx':'auto'}">
                  <div class="text_emoji" v-for="(it, idx) in item.isay_list" :key="idx">
                    <text v-if="it.msgType==='text'">{{it.msgCont}}</text>
                    <image v-if="it.msgType==='emoji'" :src="it.msgImage" class="emoji"></image>
                  </div>
                </div>
              </div>
            </div>
            <div class='mainList mainList_robort' v-if="item.robot!= undefined" :class="{marbo:item.ceart=='weather'}">
              <div class='mainPhoto l-i'>
                <image :src='headLeft'></image>
              </div>
              <div class='mainInfor l-t'>
                <text class="text" :style="{width:item.robot==''?'200rpx':'auto'}" v-if="item.ceart!='image'&&item.ceart!='voice'&&item.ceart!='phiz'"  :data-text='item.robot'>{{item.robot}}</text>
                <!-- 语音 -->
                <div class="mainInfor_voice" v-if="item.ceart=='voice'" @tap="mainInforPlay" :data-status='item.playStatus' :data-src='item.robot' :data-index='index'>
                  <image :src="item.playStatus?assetsUrl+'static/images/message_06_qh.gif':assetsUrl+'static/images/message_07_qh.png'" /><div class="miao">{{item.duration}}<div class="icon">"</div></div>
                </div>
                <!-- /语音 -->
                <image :src='item.robot' mode="aspectFit" class='mainInfor_img' v-if="item.ceart=='image'" @tap="fullScreen" :data-src='item.robot'  :style="{width:item.width+'rpx',height:item.height+'rpx'}"></image>
                <div v-if="item.ceart=='phiz'" class="text" :style="{width:item.robot==''?'200rpx':'auto'}">
                  <div class="text_emoji" v-for="(it, idx) in item.robot_list" :key="idx">
                    <text v-if="it.msgType==='text'">{{it.msgCont}}</text>
                    <image v-if="it.msgType==='emoji'" :src="it.msgImage" class="emoji"></image>
                  </div>
                </div>
              </div>
            </div>
            <div class='mainList mainList_robort'  v-if="item.ceart=='weather'">
              <div class='mainPhoto l-i'></div>
              <div class='mainInfor l-t'>
                <div class="weather_box">
                  <div class="weather_tmp">
                    <div class='wind  i'>{{item.weather.now.tmp}}<div class='du'>℃</div></div>
                    <div class="wind_box">
                      <image class='week_pic' mode='widthFix' :src="weatherIconUrl+item.weather.now.pic+'.png'"></image>
                      <div class='weather i'>{{item.weather.now.cond_txt_d}}</div>
                    </div>
                    <div class="wind_des">
                      <div class="wind_date">
                        <div class='date i'>{{item.weather.now.month}}/{{item.weather.now.day}}</div>
                        <div class='week i'>{{item.weather.now.week}}</div>
                      </div>
                      <div class='temperature i'><div class='tempe'>{{item.weather.now.tmp_min}}<div class='du'>℃</div></div>~<div class='tempe'>{{item.weather.now.tmp_max}}<div class='du'>℃</div></div></div>
                    </div>
                  </div>
                  <div class="weather_des" >
                    <div class="next_day" v-for="(it, idx) in item.weather.forecast" :key="idx">
                      <div class='date i'>{{it.month}}/{{it.day}}</div>
                      <div class='week i'>{{it.week}}</div>
                      <div class='weather i'>{{it.cond_txt_d}}</div>
                      <image class='week_pic' mode='widthFix' :src="weatherIconUrl+it.pic+'.png'"></image>
                      <div class='temperature i'>{{it.tmp_min}}/{{it.tmp_max}}<div class='du'>℃</div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class='recording' v-if="recording">
          <div class='mainPhoto'>
            <image :src='headRight'></image>
          </div>
          <div class='mainInfor'>
            <!-- <text >正在录音中...</text> -->
            <div class="loading-text">
              <div class="object object_one"></div>
              <div class="object object_two"></div>
              <div class="object object_three"></div>
            </div>
          </div>
        </div>
        <div  id="translate-fake" class="translate-fake"></div><div id="translate-end" class="translate-fake"></div>
      </scroll-view>
    <!-- 输入区域 -->
    <div class="mainBtm_fixed" :style="{bottom:fixedBtm+'px'}">
      <div class="voice_loading" @tap="bindMute">
          <image :src="isMute?assetsUrl+'static/images/music_mute.png':assetsUrl+'static/images/music_voiced.png'" mode="widthFix" />
          <div id="circle" :class="{load_hover:isLoad}">
          <div class="load_right load_div"></div>
          <div class="load_left load_div"></div>
        </div>
      </div>
      <scroll-view  scroll-x scroll-with-animation="true" class="mainTab">
         <div v-for='(item, index) in examplelist' :key="index"  @tap="bindTabinfo(index)" class="tab_info">{{item.info}}</div>
      </scroll-view>
      <div class="mainBtm">
        <image v-if="isSend" :src="assetsUrl+'static/images/message_02.png'" @tap="bindSend" />
        <image v-else :src="assetsUrl+'static/images/message_03.png'" @tap="bindSend" />
        <div v-if="!isSend" class="mainInput">
          <input type="text" :value="inputValue" @input="doInput" :focus="focus" @focus="inputFocus" @blur="inputBlur" @confirm="inputConfirm"
            :adjust-position="false" confirm-type="send" :confirm-hold="true" />
        </div>
        <div v-else :class="['mainVoice', recording? 'mainVoice_bg' : '']" @touchstart="streamRecord" @touchend="streamRecordEnd">
          {{recording ? '松开 结束' : '按住 说话'}}
        </div>
        <image v-if="!showEmojis" :src="assetsUrl+'static/images/message_04.png'" @tap="toggleEmojis" />
        <image v-else :src="assetsUrl+'static/images/message_02.png'" @tap="toggleEmojis" />
        <image :src="assetsUrl+'static/images/message_05.png'" @tap="showBcgImgArea" />
      </div>
      <div v-if="showEmojis" class="emojis_box">
        <div class="emoji_wrap" v-for="(item, index) in emojiList" :key="index">
          <image @tap="clickEmoji" :src="item.img" :data-key="item.key" class="emoji" />
        </div>
        <div class="emoji_wrap">
          <text @tap="inputConfirm" class="emoji_send">发送</text>
        </div>
      </div>
    </div>
    <!-- /输入区域 -->
    <div class="boradcast_popup" v-if="recording">
      <div class="boradcast_box">
        <image class="tape_img" :src="assetsUrl+'static/images/tape.png'" />
       <div class="tape_box">
          <div class="load tape_06"></div>
          <div class="load tape_05"></div>
          <div class="load tape_04"></div>
          <div class="load tape_03"></div>
          <div class="load tape_02"></div>
          <div class="load tape_01"></div>
        </div>
      </div>
    	<!-- <text>正在录音中...</text>
    	<text>松开发送</text> -->
    </div>
  </div>
</div>
</template>

<script>
  import background from '@/components/background';
  const plugin = requirePlugin("WechatSI")
  // 获取**全局唯一**的语音识别管理器**recordRecoManager**
  const manager = plugin.getRecordRecognitionManager()
  const { emojis, emojiToPath, textToEmoji } = require('../../utils/emojis');
  export default {
    name: 'Ai',
    components: {
      background
    },
    data() {
      return {
        assetsUrl:this.globalData.assetsUrl,
        ai:'tuling',//'tuling,qingyunke'
        recorderManager:null,
        examplelist:[{info:'广州的天气'},{info:'小AI，叫爸爸'},{info:'小九九是谁啊?'},{info:'网抑时间到！'},{info:'皮一下！'}],
        scale:0,
        windowHeight:0,
        scrollHeight:0,//内容区高度
        tabBarHeight:0,//底部导航高度
        scrollTop:10000,//竖向滚动条,位置滑动到底部
        fixedBtm: 0,
        isSend: false, //切换语音与文本框
        inputValue: '',
        voiceSrc:null,//语音
        isMute:false,
        isLoad:false,//加载进度
        popupStatus: false, //底部弹出层显隐
        recording: false,  // 正在录音
        recordStatus: 0,   // 状态： 0 - 录音中 1- 翻译中 2 - 翻译完成/二次翻译
        toView: 'fake',  // 滚动位置
        chatlist:[],
        headLeft: this.globalData.assetsUrl+'static/images/cp_00.jpg',
        headRight: this.globalData.assetsUrl+'static/images/cp_10.jpg',
        weatherIconUrl: 'https://cdn.heweather.com/cond_icon/',
        emojiList: [],
        showEmojis: false,
        focus:false,
        bcgImgAreaShow:false,
        bcgImgList: [
          {src: 'public/bgimg/bg_26.jpg',topColor: '#66cdcc'},
          {src: 'public/bgimg/bg_27.jpg',topColor: '#566876'},
          {src: 'public/bgimg/bg_25.jpg',topColor: '#282C38'},
          {src: 'public/bgimg/bg_29.jpg',topColor: '#EBD3BB'},
          {src: 'public/bgimg/bg_15.jpg',topColor: '#F4CD58'},
          {src: 'public/bgimg/bg_16.jpg',topColor: '#36385f'},
          {src: 'public/bgimg/bg_21.jpg',topColor: '#F7DA7A'},
          {src: 'public/bgimg/bg_22.jpg',topColor: '#F7DA7A'},
        ],
        bcgImgIndex: 0,
        bcgColor: '#66cdcc',
        bcgImg:'public/bgimg/bg_26.jpg'
      }
    },

    onLoad: function (options) {
      this.setBcgImg();
      this.getHistory();
    	let recorderManager = wx.getRecorderManager();
    	let scale = 750 / wx.getSystemInfoSync().windowWidth;// px转换到rpx的比例
    	let scrollHeight = wx.getSystemInfoSync().windowHeight * scale;// window的高度
      let ktxStatusHeight = wx.getSystemInfoSync().statusBarHeight* scale; // 状态栏的高度
      let navigationHeight = 44 * scale;// 导航栏的高度
      let ktxScreentHeight = wx.getSystemInfoSync().screenHeight * scale; // 屏幕的高度
      let tabBarHeight = ktxScreentHeight - ktxStatusHeight - navigationHeight - scrollHeight;// 底部tabBar的高度
    	this.recorderManager=recorderManager;
    	this.scale=scale;
    	this.scrollHeight= scrollHeight -96-74;
      this.windowHeight=scrollHeight-96-74;
      this.tabBarHeight= tabBarHeight;
      // this.toView='fake';
      // console.log(`屏幕的高度:${ktxScreentHeight}-状态栏的高度:${ktxStatusHeight}-导航栏的高度:${navigationHeight}-window的高度:${scrollHeight}-底部tabBar的高度:${tabBarHeight}-${scale}`);
      this.initRecord();

      // 获取表情包
      const emojiList = Object.keys(emojis).map(key => ({
        key: key,
        img: emojiToPath(key)
      }))
      // 更新表情状态
      this.emojiList=emojiList;
    },
    onShow: function() {
      this.scrollToNew();
    },
    onReady: function(e) {
      // console.log(this.globalData.assetsUrl)
      //创建内部 audio 上下文 InnerAudioContext 对象。
      this.innerAudioContext = wx.createInnerAudioContext();
      this.innerAudioContext.onError(function (res) {
        // console.log(res);
        wx.showToast({
          title: '语音播放失败',
          icon: 'none',
        })
      })
    },
   onHide: function() {
      this.yuyinPause();
      this.setHistory();
    },
    computed:{

    },
    methods: {
      createLoves(event){
      	this.$refs.background.createLoves(event)
      },
      removeSmallHert(){
      	this.$refs.background.removeSmallHert()
      },
      //滚动到底部最新消息
      bottom() {
        this.scrollTop= 900000;
      },
        /**
         * 重新滚动到底部
         */
      scrollToNew() {
        this.toView=this.toView=='fake'?'end':'fake';
      },

      bindMute(){
        this.innerAudioContext.volume=this.isMute?1:0;
        this.isMute= !this.isMute;
      },
      bindSend() {
        if(!this.isSend){
          this.inputBlur();
        }
        this.isSend = !this.isSend;
      },
      bindPopup() {},
      bindTabinfo(idx){
        this.inputValue=this.examplelist[idx].info;
        this.personalMsg();
      },
      doInput(e){
        this.inputValue=e.mp.detail.value;
      },
      //输入框聚焦
      inputFocus(e) {
        let than=this;
        than.showEmojis=false;
        than.focus=true;
        //键盘高度
        let height = !e ? this.fixedBtm : e.mp.detail.height;
        let scrollHeight = this.windowHeight - height * this.scale+this.tabBarHeight;//686
        this.fixedBtm=height-this.tabBarHeight/this.scale;
        this.scrollHeight=scrollHeight;
        setTimeout(function () {
           than.scrollToNew();
        }, 200)
      },
      //输入框失去焦点
      inputBlur() {
        	let scrollHeight = this.scrollHeight + this.fixedBtm * this.scale;
          this.focus=false;
        	this.fixedBtm=0;
        	this.scrollHeight=scrollHeight;
      },
      // 隐藏表情选择框
      hideEmojis: function () {
        this.showEmojis=false;
      },
      // 隐藏或显示表情选择框
      toggleEmojis: function () {
        let than=this;
        this.showEmojis=!this.showEmojis;
        if (this.showEmojis) {
          this.focus=false;
          this.isSend=false;
          setTimeout(function () {
            than.scrollHeight=than.windowHeight -342;
            // console.log(than.scrollHeight);
            than.scrollToNew();
          }, 200)
        } else {
          this.focus=true;
        }
      },
      // 点击表情
      clickEmoji: function (e) {
        const { key } = e.mp.currentTarget.dataset;
        this.inputValue=this.inputValue+ key ;
      },
      //背景
      showBcgImgArea() {
        this.bcgImgAreaShow=true;
      },

      hideBcgImgArea() {
        this.bcgImgAreaShow= false;
       },
       chooseBcg (e) {
         let dataset = e.currentTarget.dataset
         let src = dataset.src
         let index = dataset.index
         this.setBcgImg(index)
         wx.setStorage({
           key: 'bcgImgIndex',
           data: index,
         })
       },
        setBcgImg (index) {
         if (index !== undefined) {
           this.bcgImgIndex=index;
           this.bcgImg= this.bcgImgList[index].src;
           this.bcgColor= this.bcgImgList[index].topColor;
           this.setNavigationBarColor()
           return
         }
         wx.getStorage({
           key: 'bcgImgIndex',
           success: (res) => {
             let bcgImgIndex = res.data || 0
             this.bcgImgIndex=bcgImgIndex;
             this.bcgImg=this.bcgImgList[bcgImgIndex].src;
             this.bcgColor=this.bcgImgList[bcgImgIndex].topColor;
             this.setNavigationBarColor()
           },
           fail: () => {
             this.bcgImgIndex=0;
             this.bcgImg=this.bcgImgList[0].src;
             this.bcgColor=this.bcgImgList[0].topColor;
             this.setNavigationBarColor()
           },
         })
       },
       setNavigationBarColor(color) {
         let bcgColor = color || this.bcgColor
         wx.setNavigationBarColor({
           frontColor: '#ffffff',
           backgroundColor: this.bcgColor,
         })
       },
      //点击键盘发送
      inputConfirm() {
        if (!!this.inputValue){
        	this.personalMsg("text");
        }
      },
      //语音转文字
      initRecord() {
        //有新的识别内容返回，则会调用此事件
        manager.onRecognize = (res) => {

          let text = res.result
          this.inputValue=text;
        }
        // 识别结束事件
        manager.onStop = (res) => {
          // console.log(res);
          let text = res.result
          if(text == '') {
            // 用户没有说话，可以做一下提示处理...

            return
          }
          this.inputValue=text;
          // 得到完整识别内容就可以去翻译了
          this.translateTextAction()
          this.personalMsg();
        }
      },
      /**
         * 按住按钮开始语音识别
         */
      streamRecord(e) {
        this.yuyinPause();
        manager.start({
          lang: "zh_CN",
        });
        this.recording= true;
        this.scrollToNew();
      },

       /**
         * 松开按钮结束语音识别
        */
      streamRecordEnd(e) {
        manager.stop();
        // 防止重复触发stop函数
        if(!this.recording || this.recordStatus != 0) {
          // console.warn("has finished!")
          return
        }
        this.recording= false;

      },

      //发送聊天消息
      personalMsg(msgType=null){
        const that=this;
        this.isLoad=true;
        //添加时间戳
        let isTime = new Date().getTime();
        this.chatlist=this.chatlist.concat({isay:this.inputValue, isay_list: textToEmoji(this.inputValue)});
        this.scrollToNew();
        if(this.inputValue!=''){
         if(msgType=='text'){
            wx.hideKeyboard();//收起键盘
            this.inputBlur();
          }
          let name=this.inputValue.indexOf("皮一下") != -1 || this.inputValue.indexOf("网抑") != -1 ?'chatzdy':'chat';
          let ai=this.inputValue.indexOf("皮一下") != -1 ?'skin':this.inputValue.indexOf("网抑") != -1 ?'netEas':this.ai;
          wx.cloud.callFunction({
            name: name,
            data: {
              info: this.inputValue,
              ai:ai
            }
          }).then(res => {
            this.inputValue= '';
            // console.log(res.result);
            let content=res.result.text;
            this.chatlist[this.chatlist.length-1 ].robot=content;
            this.chatlist[this.chatlist.length-1 ].ceart=res.result.ceart;
            for(let key of this.chatlist){
              key.playStatus = false;
            };
            this.yuyinPause();//关闭语音
            if(res.result.ceart=="weather"){
              this.chatlist[this.chatlist.length-1 ].weather=res.result.weather;
            }
            if(res.result.ceart=="voice"){
              this.chatlist[this.chatlist.length-1 ].duration=res.result.duration;
            }
            if(res.result.ceart=="image"){
              this.chatlist[this.chatlist.length-1 ].width=res.result.width>486?486:res.result.width;
              this.chatlist[this.chatlist.length-1 ].height=res.result.width>486?(486*res.result.height/res.result.width):res.result.height;
            }
            if(res.result.ceart=="phiz"){
              this.chatlist[this.chatlist.length-1 ].robot_list=textToEmoji(content);
            }
            this.scrollToNew();
            if(res.result.ceart=="weather"||res.result.ceart=="text"||res.result.ceart=="phiz"){
              this.wordYun(content);
            }
            this.isLoad=false;
          }).catch(err => {
            // console.error(err);
            this.chatlist[this.chatlist.length-1 ].robot='';
            this.chatlist[this.chatlist.length-1 ].ceart= 'text';
            this.chatlist[this.chatlist.length-1 ].playStatus=false;
            this.inputValue= '';
            this.isLoad=false;
            this.scrollToNew();
          });
        }
      },

      // 文字转语音
      wordYun(content) {
        var that = this;
        plugin.textToSpeech({
          lang: "zh_CN",
          tts: true,
          content: content,
          success: function (res) {
            // console.log(res);
            // console.log("succ tts", res.filename);
            that.voiceSrc=res.filename;
            that.yuyinPlay();
          },
          fail: function (res) {
            console.log("fail tts", res)
          }
        })
      },

      //播放语音
      yuyinPlay(index=-1) {
        let _this=this;
        if (this.voiceSrc == '') {
          console.log('暂无语音');
          return;
        }
        // console.log(this.voiceSrc);
        this.innerAudioContext.src = this.voiceSrc //设置音频地址
        this.innerAudioContext.play(); //播放音频
        if(index>-1){
          //监听开始
          this.innerAudioContext.onPlay(() => {
            for(let key of _this.chatlist){
              key.playStatus = false;
            };
            _this.chatlist[index].playStatus = true;
            console.log('播放开始！');
          })

          //结束监听
          this.innerAudioContext.onEnded(() => {
            _this.chatlist[index].playStatus = false;
            console.log('播放结束！');
          })
        }
      },

      // 结束语音
      yuyinPause (e) {
        this.innerAudioContext.pause();//暂停音频
        console.log('播放暂停！');
      },

      //翻译
      translateTextAction() {
        let lfrom =  'zh_CN'
        let lto = 'en_US'
        plugin.translate({
          lfrom: lfrom,
          lto: lto,
          content: this.inputValue,
          tts: true, // 需要合成语音
          success: (resTrans)=>{
            // 翻译可以得到 翻译文本，翻译文本的合成语音，合成语音的过期时间
            let text = resTrans.result
            this.translateText=text;
            // 得到合成语音让它自动播放出来
            // wx.playBackgroundAudio({
            //   dataUrl: resTrans.filename,
            //   title: '',
            // })
          },
        })
      },

      //图片放大
      fullScreen(e) {
        let curSrc = e.mp.currentTarget.dataset.src;
        let srcAll = [];
        this.chatlist.forEach(item=>{
          if(item.ceart=='image'){
            srcAll.push(item.robot)
          }
        })
        // console.log(curSrc);
        wx.previewImage({
          current: curSrc,
          urls: srcAll
        })
      },
      //声音回放
      replay(e){
        let content = e.mp.currentTarget.dataset.text;
        this.wordYun(content);
       },
       mainInforPlay(e){
         let status = e.mp.currentTarget.dataset.status;
         let audioSrc = e.mp.currentTarget.dataset.src;
         let index = e.mp.currentTarget.dataset.index;
         this.voiceSrc =audioSrc;
         console.log('播放位置',index,status);
         this.yuyinPlay(index,status);
         
       },
        /**
          * 得到历史记录
        */
       getHistory: function() {
         try {
           let history = wx.getStorageSync('history')
           if (history) {
            this.chatlist=history;
           }
         } catch (e) {
           this.chatlist= [];
         }
       },
       /**
        * 设置语音识别历史记录
        */
       setHistory: function() {
         try {
           let chatlist = this.chatlist
           chatlist.forEach(item => {
             item.playStatus= false;
           })
           wx.setStorageSync('history',chatlist);
         } catch (e) {
           console.error("setStorageSync setHistory failed")
         }
       },
    },
  }
</script>

<style  lang="stylus" scoped>
@import '../../common/css/font.css'

@-webkit-keyframes circle-animation
  from
    clip rect(0rpx, 88rpx, 88rpx, 44rpx)
  to
    clip: auto
@-webkit-keyframes left-animation
  0%
    transform rotate(-45deg)
  50%
    transform rotate(135deg)
  100%
    transform rotate(315deg)
@-webkit-keyframes right-animation
  0%
    transform rotate(-45deg)
  50%
    transform rotate(135deg)
  100%
    transform rotate(135deg)

@-webkit-keyframes animation_one
  75%
    -webkit-transform scale(0)
@-webkit-keyframes animation_two
  75%
    -webkit-transform scale(0)
@-webkit-keyframes animation_three
  75%
    -webkit-transform scale(0)

@-webkit-keyframes animation_01
  75%
    visibility visible
    opacity 0
  76%
    opacity 1
@-webkit-keyframes animation_02
  75%
    visibility visible
    opacity 0
  76%
    opacity 1
@-webkit-keyframes animation_03
  75%
    visibility visible
    opacity 0
  76%
    opacity 1
@-webkit-keyframes animation_04
  75%
    visibility visible
    opacity 0
  76%
    opacity 1
@-webkit-keyframes animation_05
  75%
    visibility visible
    opacity 0
  76%
    opacity 1
@-webkit-keyframes animation_06
  75%
    visibility visible
    opacity 0
  76%
    opacity 1

#login
  position fixed
  top 0
  left 0
  height 100%
  width 100%
  z-index 1

.bcg
  position: fixed
  z-index: -1
  height 100%
  width 100%
  top 0
  right 0
  bottom 0
  left 0
.chooseBcg
  display flex
  flex-direction column
  min-height 100vh
  position fixed
  z-index 100
  top 0
  left 0
  right 0
  width 100%
  font-size 24rpx
  color #333
  .top
    box-sizing border-box
    padding 20rpx 20rpx 50rpx
    background rgba(255, 255, 255, 0)
    color #fff
    .bcgs
      display flex
      align-items center
      margin-top 20rpx
      overflow scroll
      .border
        padding 6rpx
        margin-right 14rpx
        border 1rpx solid rgba(255, 255, 255, 0)
        transition .1s ease
        image
          width 110rpx
          height 190rpx
        &:last-child
          margin-right 0
      .active
        border 1rpx solid #40a7e7
        transition .1s ease
  .close
    flex 1
    background rgba(0, 0, 0, 0)
    padding 20rpx 0
    text-align center
    image
      width 64rpx
      height 64rpx
      margin: 0 auto


.ai
  height 100%
  // .in_ai
  //   width 690rpx
  //   padding 30rpx
  //   height 160rpx
  //   background -webkit-linear-gradient(#66cdcc 0%, #ffffff 100%)
  .dialog-part
    position absolute
    left 0
    top 0
    // bottom 170rpx
    right 0
    z-index 1
  .translate-fake
    width 100%
    height 0rpx
    background-color #63A92C
  .item_info
    &:nth-last-child(2)
      .con
        .mainList_robort
            margin-bottom 32rpx
        .marbo
            margin-bottom 0
  .con
    padding 32rpx 32rpx 0
    .mainList
      min-height 80rpx
      .mainPhoto
        width 80rpx
        height 80rpx
        border-radius 50%
        overflow hidden
        image
          display block
          width 80rpx
          height 80rpx
      .mainInfor
        margin-left 100rpx
        margin-right 100rpx
        padding-top 6rpx
        .text
          padding 18rpx
          line-height 42rpx
          font-size 28rpx
          text-overflow ellipsis
          display inline-block
          min-height 42rpx
          // min-width 200rpx
        .mainInfor_voice
          display inline-block
          align-items center
          // background #63A92C
          background-color #000
          color #fff
          opacity 0.8
          border-radius: 0 34rpx 34rpx 34rpx;
          line-height 36rpx
          font-size 24rpx
          text-overflow ellipsis
          height 36rpx
          padding 21rpx 48rpx 21rpx 18rpx
          .miao
            float left
            display inline-block
            position relative
            margin-left 10rpx
            margin-right 25rpx
            .icon
              position absolute
              font-size 24rpx
              top -5rpx
              right -12rpx
          image
            float left
            display inline-block
            width 36rpx
            height 36rpx
        .mainInfor_img
          max-width 486rpx
          // max-height 200rpx
          border-radius 0 34rpx 34rpx 34rpx
          background rgba(0,0,0,0.6)
          color #fff
          display inline-block
          overflow hidden


    .mainList_isay
      margin-bottom 30rpx
      .r-i
        float right
      .r-t
        text-align right
        .text
          border-radius 34rpx 0 34rpx 34rpx
          background #e9e9e9
          opacity 0.8
          color #252525
          display inline-block
        .text_emoji
          display inline-block
          .emoji
            width 56rpx
            height 56rpx
            display inline-block
            overflow hidden

    .mainList_robort
      .l-i
        float left
      .l-t
        text-align left
        .text
          border-radius 0 34rpx  34rpx 34rpx
          background #000
          // background #63a92c
          opacity 0.8
          color #fff
        .text_emoji
          display inline-block
          .emoji
            width 56rpx
            height 56rpx
            display inline-block
            overflow hidden

    .weather_box
      width 486rpx
      border-radius 0 34rpx 34rpx 34rpx
      background rgba(0, 0, 0, .6)
      color #fff
      .weather_tmp
        height 90rpx
        padding 54rpx 20rpx
        display flex
        align-items center
        justify-content center
        margin-top 20rpx
        font-size 24rpx
        border-bottom 1rpx solid rgba(250, 250, 250, .2)
        .wind
          display inline-block
          font-size 70rpx
          position relative
          .du
            position absolute
            font-size 12px
            top 5rpx
            right -30rpx
        .tempe
          position relative
          display inline-block
          margin-right 20rpx
          .du
            position absolute
            top 0rpx
            right -20rpx
            font-size 18rpx


        .wind_box
          display inline-block
          width 120rpx
          margin  0 12rpx
          .week_pic
            width 40rpx
            margin 0 auto 10rpx
          .weather
            text-align center
        .wind_des
          .wind_date
            height 40rpx
            margin-bottom 10rpx
            display flex
            justify-content space-between

      .weather_des
        width 100%
        display flex
        padding-bottom 40rpx
        align-self flex-end
        .next_day
          width calc(25% - 4rpx)
          text-align center
          line-height 30px
          font-size 24rpx
          margin 0 3rpx
          display flex
          flex-direction column
          justify-content flex-start
          align-items center
          flex-shrink: 0;
          .week_pic
            width 40rpx
            margin-bottom 10rpx
          .temperature
            position relative
            .du
              position absolute
              top -5rpx
              right -18rpx
              font-size 16rpx


  .recording
    height 80rpx
    padding 32rpx
    .mainPhoto
      width 80rpx
      height 80rpx
      border-radius 50%
      overflow hidden
      float right
      image
        display block
        width 80rpx
        height 80rpx
    .mainInfor
      margin-left 100rpx
      margin-right 100rpx
      padding-top 6rpx
      text-align right
      .loading-text,text
        padding 18rpx
        line-height 42rpx
        font-size 28rpx
        text-overflow ellipsis
        display inline-block
        height 42rpx
        border-radius 34rpx 0 34rpx 34rpx
        background #e9e9e9
        color #252525
        .object
          width 10rpx
          height 10rpx
          background-color #fff
          border-radius 50%
          float left
          margin-left 10rpx
          margin-top 16rpx
        .object_one
          background-color #51a0fe
          animation animation_one 1.5s infinite
        .object_two
          background-color #e8542b
          animation animation_two 1.5s infinite
          animation-delay .25s
        .object_three
          background-color #6bc30d
          animation animation_three 1.5s infinite
          animation-delay .5s

  /* 输入区域 */
  .mainBtm_fixed
    position fixed
    left 0rpx
    bottom 0rpx
    z-index 9
    width 100%
    border-top 2rpx solid #ccc
    background #F6F6F6
    opacity 0.9
    .voice_loading
      position absolute
      right 32rpx
      top -94rpx
      width 88rpx
      height 88rpx
      background #fff
      border-radius 50%
      opacity 0.6
      image
        position absolute
        width 54rpx
        height 54rpx
        border-radius: 50%
        top 50%
        left 50%
        transform: translate(-50%,-50%);
      #circle
        width 88rpx
        height 88rpx
        border-width 0
        position absolute
        clip rect(0rpx, 88rpx, 88rpx, 44rpx)
        &.load_hover
          animation circle-animation 5s linear
          .load_div
            position: absolute
            left 0
            top 0
            width 100%
            height 100%
            box-sizing border-box
            border-radius 50%
            border 5rpx solid rgba(0, 0, 0, 0)
            border-left 5rpx solid #66cdcc
            border-top 5rpx solid #66cdcc
            transform rotate(-45deg)
          .load_left
            animation left-animation 5s linear
          .load_right
            animation right-animation 5s linear

    .mainTab
      height 74rpx
      width 100%
      white-space nowrap
      padding 2rpx 20rpx
      box-sizing border-box
      transition-duration 1000ms
      display flex
      flex-direction row
      justify-content flex-start
      align-items center
      .tab_info
        display inline-block
        border 2rpx solid eaeaea
        border-radius 35rpx
        font-size 24rpx
        color #828282
        height 70rpx
        line-height 70rpx
        padding 0 32rpx
        background #fff
        margin-right 20rpx
        &:last-child
          margin-right 0
    ::-webkit-scrollbar
      width 0
      height 0
      color transparent
    .mainBtm
      display flex
      justify-content space-between
      align-items center
      height 60rpx
      padding 18rpx 32rpx
      image
        display block
        width 48rpx
        height 48rpx
      .mainInput
        width 440rpx
        padding 6rpx 20rpx
        border-radius 10rpx
        background #fff
        input
          display block
          width 100%
          height 48rpx
          min-height 48rpx
          line-height 48rpx
          font-size: 24rpx
          color: #333
      .mainVoice
        width 480rpx
        border-radius 10rpx
        height 60rpx
        line-height 60rpx
        text-align center
        font-size 28rpx
        color #333
        background #fff
       .mainVoice_bg
          background #DBDBDB
       .mainPopup
          height 410rpx
          padding 20rpx 0rpx
          background #ededee
  .emojis_box
    border-top 1px solid #ccc
    height 150px
    padding 10px 25rpx
    display flex
    flex-flow row wrap
    align-content flex-start
    .emoji_wrap
      flex 0 0 100rpx
      height 50px
      display flex
      align-items center
      justify-content center
      .emoji
        width 28px
        height 28px
        padding 5px
     .emoji_send
        color #fff
        background #1aad19
        border-radius 5px
        font-size 9pt
        width 100%
        text-align center
        padding 5px 0


/* 语音 */
.boradcast_popup
  position: fixed;
  left 50%
  top 50%
  transform translate(-50%,-50%)
  z-index 999
  border-radius 20rpx
  background-color #000
  opacity 0.6
  width 292rpx
  height 292rpx
  display flex
  justify-content center
  align-items center

  .boradcast_box
    height 110rpx
    width 173rpx
    position relative
    .tape_img
      position absolute
      height 110rpx
      width 72rpx
      top 0
      left 0
    .tape_box
      position absolute
      width 80rpx
      right 0
      top 50%
      transform translateY(-50%)
      .load
        background #FFF
        margin 8rpx 0
        height 9rpx
        width 25rpx
        border-radius 4rpx
        visibility hidden
      .tape_01
        height 8rpx
        animation animation_01 4.5s infinite
        animation-delay .25s
      .tape_02
        height 8rpx
        width 35rpx
        animation animation_02 4.5s infinite
        animation-delay: .5s;
      .tape_03
        width 48rpx
        animation animation_03 4.5s infinite
        animation-delay .75s
      .tape_04
        width 59rpx
        animation animation_04 4.5s infinite
        animation-delay 1s
      .tape_05
        height 10rpx
        width 70rpx
        animation animation_05 4.5s infinite
        animation-delay 1.25s
      .tape_06
        height 10rpx
        width 80rpx
        animation animation_06 4.5s infinite
        animation-delay 1.5s
</style>
